<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入所需要的文件-->

    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../js/bootstrap.js"></script>


    <script src="../bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    <script src="../bower_components/moment/min/moment.min.js"></script>
    <script src="../bower_components/moment/min/locales.min.js"></script>
    <script src="../bower_components/bootbox/bootbox.min.js"></script>
    <script src="../bower_components/bootstrap-select/js/bootstrap-select.js"></script>
    <script src="../bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
    <script src="../bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="../bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../bower_components/moment/min/moment-with-locales.min.js"></script>


    <script type="application/javascript">
        $(function(){
            //读取数据类型
            $.ajax({
                type:"get",	//提交类型
                dataTyp:"json",//数据类型
                url:"../json/jizhan.json",//数据访问路径
                success:function(reslt){//返回成功后所调用得函数
                    creteTable(reslt);//函数调用
                },
                error:function(date){//返回失败所调用得函数
                    alert(date);
                }
            });

            /*新增点击按钮事件*/
            $("#btnNew").click(function(){
                $("#Divdata").modal();
            });
            /*修改点击按钮事件*/
            $("#btnUpdate").click(function(){
                $("#Divdata").modal();
            });
            /*删除点击按钮事件*/
            $("#btnDel").click(function(){
                $("#Divdata").modal();
            });

        });


        /*将数据绑定在表格上*/
        function creteTable(userData){
            $("#tblUser").bootstrapTable("destroy");//清空表格
            $("#tblUser").bootstrapTable({
                data:userData,
                sidePagination:"client",
                pageSize:"2", //分页
                pagination:true,
                singleSelect:true,
                columns:[
                    {
                        field:"name_jizhan",
                        title:"基站名",
                        align:"center"
                    },
                    {
                        field:"name_clock",
                        title:"管理的电表",
                        align:"center"
                    }
                ]
            });
        }
        $("#btnoff").click(function(){
            $("").val("");
            $("").val("");
        });
    </script>
</head>

<body style="background: #0f0f0f">
<div style="height: 50px"></div>
<div class="container-fluid">
    <!--查询区域开始-->
    <center>
        <!--列表开始-->
        <div class="row col-md-10">
            <table id="tblUser"></table>
        </div>
        <!--列表结束-->
        <div class="row col-md-10">
            <div id="Select" class="form-inline">
                <div class="form-group">
                    <label class="control-label" for>基站名</label>
                    <input type="text" class="form-control" id="txtUsername1" name="username" maxlength="20"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-danger" id="btnSelect1">查询</button>
                </div>
                <div class="form-group">
                    <label class="control-label" for>电表名</label>
                    <input type="text" class="form-control" id="txtUsername2" name="username" maxlength="20"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-danger" id="btnSelect2">查询</button>
                </div>
            </div>
        </div>

        <!--查询结束-->

        <!--功能区域开始-->
        <div class="row col-md-10" style="margin-top: 20px;">
            <button class="btn btn-success" id="btnNew">新增</button>
            <button class="btn btn-warning" id="btnUpdate">修改</button>
            <button class="btn btn-danger" id="btnDel">删除</button>

        </div>
    </center>
    <!--功能区域结束-->


</div>
<!--模态框处理-->
<div class="modal fade" id="Divdata" tabindex="-1" aria-labellebdy="myModelLable" aria-hidden="hidden">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--模态标题-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
                <h4 class="modal-title">新增基站</h4>
            </div>
            <!--主体表单-->
            <div class="modal-body form-inline">
                <div class="form-group">
                    <label class="control-label" for>基站名</label>
                    <input type="text" class="form-control" id="txtDatausername1" name="Datausername" maxlength="20"/>
                </div>
                <div class="form-group">
                    <label class="control-label" for>管理的电表</label>
                    <input type="text" class="form-control" id="txtDatausername2" name="Datausername" maxlength="20"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" id="btnSave" class="btn btn-info" data-dismiss="modal" aria-hidden="true" onclick="msave()">新增</button>
                <button type="button" id="btnoff" class="btn btn-default" data-dismiss="modal" aria-hidden="true">重置</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>